<template>
  <el-tabs v-model="activeName" @tab-click="handleClick" class="evaluateTab">
    <el-tab-pane :label="`全部(${pageData0.total})`" name="first" height="300px">
      <div class="customerEvaluate" v-for="(item,index) in evaluateList0" :key="index">
        <div class="customerHeadIcon">
          <img :src="item.headIcon" alt />
        </div>
        <div class="customerInfo">
          <p class="customerName">昵称：{{item.orderId.leasee.nickname}}</p>
          <p class="orderNum">订单编号：{{item.orderId._id}} 评价日期：{{item.evaluateData}}</p>
          <div class="evaluateContent">{{item.evaluateContent}}</div>
        </div>
      </div>
      <div class="block">
        <!-- <span class="demonstration">完整功能</span> -->
        <el-pagination
          @size-change="handleSizeChange0"
          @current-change="handleCurrentChange0"
          :current-page="pageData0.currentPage"
          :page-sizes="[4, 6, 8, 10]"
          :page-size="pageData0.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData0.total"
        ></el-pagination>
      </div>
    </el-tab-pane>
    <el-tab-pane :label="`好评(${pageData1.total})`" name="second">
      <div class="customerEvaluate" v-for="(item,index) in evaluateList0" :key="index">
        <div class="customerHeadIcon">
          <img :src="item.headIcon" alt />
        </div>
        <div class="customerInfo">
          <p class="customerName">昵称：{{item.orderId.leasee.nickname}}</p>
          <p class="orderNum">订单编号：{{item.orderId._id}} 评价日期：{{item.evaluateData}}</p>
          <div class="evaluateContent">{{item.evaluateContent}}</div>
        </div>
      </div>
      <div class="block">
        <!-- <span class="demonstration">完整功能</span> -->
        <el-pagination
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          :current-page="pageData1.currentPage"
          :page-sizes="[4, 6, 8, 10]"
          :page-size="pageData1.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData1.total"
        ></el-pagination>
      </div>
    </el-tab-pane>
    <el-tab-pane :label="`一般(${pageData2.total})`" name="third">
      <div class="customerEvaluate" v-for="(item,index) in evaluateList0" :key="index">
        <div class="customerHeadIcon">
          <img :src="item.headIcon" alt />
        </div>
        <div class="customerInfo">
          <p class="customerName">昵称：{{item.orderId.leasee.nickname}}</p>
          <p class="orderNum">订单编号：{{item.orderId._id}} 评价日期：{{item.evaluateData}}</p>
          <div class="evaluateContent">{{item.evaluateContent}}</div>
        </div>
      </div>
      <div class="block">
        <!-- <span class="demonstration">完整功能</span> -->
        <el-pagination
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
          :current-page="pageData2.currentPage"
          :page-sizes="[4, 6, 8, 10]"
          :page-size="pageData2.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData2.total"
        ></el-pagination>
      </div>
    </el-tab-pane>
    <el-tab-pane :label="`差评(${pageData3.total})`" name="fourth">
      <div class="customerEvaluate" v-for="(item,index) in evaluateList0" :key="index">
        <div class="customerHeadIcon">
          <img :src="item.headIcon" alt />
        </div>
        <div class="customerInfo">
          <p class="customerName">昵称：{{item.orderId.leasee.nickname}}</p>
          <p class="orderNum">订单编号：{{item.orderId._id}} 评价日期：{{item.evaluateData}}</p>
          <div class="evaluateContent">{{item.evaluateContent}}</div>
        </div>
      </div>
      <div class="block">
        <!-- <span class="demonstration">完整功能</span> -->
        <el-pagination
          @size-change="handleSizeChange3"
          @current-change="handleCurrentChange3"
          :current-page="pageData3.currentPage"
          :page-sizes="[4, 6, 8, 10]"
          :page-size="pageData3.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData3.total"
        ></el-pagination>
      </div>
    </el-tab-pane>
    <el-tab-pane :label="`统计图表`">
      <div id="pieBox"></div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
var echarts = require("echarts");

import axios from "axios";
export default {
  data() {
    return {
      pageData0: {
        currentPage: 1,
        pageSize: 2,
        grade: 0,
        total: 4
      },
      pageData1: {
        currentPage: 1,
        pageSize: 2,
        grade: 0,
        total: 4
      },
      pageData2: {
        currentPage: 1,
        pageSize: 2,
        grade: 0,
        total: 4
      },
      pageData3: {
        currentPage: 1,
        pageSize: 2,
        grade: 0,
        total: 4
      },
      activeName: "first",

      evaluateList0: [],
    };
  },
  created() {
    this.getEvaluate0();
    this.getEvaluate1();
    this.getEvaluate2();
    this.getEvaluate3();
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },

    // =========================
    handleCurrentChange0(val) {
      console.log(val);
      this.pageData0.currentPage = val;
      this.getEvaluate0();
    },
    handleSizeChange0(val) {
      console.log(val);
      this.pageData0.pageSize = val;
      this.getEvaluate0();
    },
    handleCurrentChange1(val) {
      console.log(val);
      this.pageData1.currentPage = val;
    this.getEvaluate1();
    },
    handleSizeChange1(val) {
      console.log(val);
      this.pageData1.pageSize = val;
    this.getEvaluate1();
    },
    handleCurrentChange2(val) {
      console.log(val);
      this.pageData2.currentPage = val;
    this.getEvaluate2();
    },
    handleSizeChange2(val) {
      console.log(val);
      this.pageData2.pageSize = val;
    this.getEvaluate2();
    },
    handleCurrentChange3(val) {
      console.log(val);
      this.pageData3.currentPage = val;
    this.getEvaluate3();
    },
    handleSizeChange3(val) {
      console.log(val);
      this.pageData3.pageSize = val;
    this.getEvaluate3();
    },
 
    async getEvaluate0() {
      const { data } = await axios.get("/evaluate/getEvaluate", {
        params: {
          currentPage: this.pageData0.currentPage,
          pageSize: this.pageData0.pageSize,
          grade: 0
        }
      });
      console.log("全部", data);
      this.evaluateList0 = data.rows;
      this.pageData0.total = data.total;
    },
    async getEvaluate1() {
      const { data } = await axios.get("/evaluate/getEvaluate", {
        params: {
          currentPage: this.pageData1.currentPage,
          pageSize: this.pageData1.pageSize,
          grade: 1
        }
      });
      console.log("好评", data);
      this.evaluateList0 = data.rows;
      this.pageData1.total = data.total;
    },
    async getEvaluate2() {
      const { data } = await axios.get("/evaluate/getEvaluate", {
        params: {
          currentPage: this.pageData2.currentPage,
          pageSize: this.pageData2.pageSize,
          grade: 2
        }
      });
      console.log("一般", data);
      this.evaluateList0 = data.rows;
      this.pageData2.total = data.total;
    },
    async getEvaluate3() {
      const { data } = await axios.get("/evaluate/getEvaluate", {
        params: {
          currentPage: this.pageData3.currentPage,
          pageSize: this.pageData3.pageSize,
          grade: 3
        }
      });
      console.log("差评", data);
      this.evaluateList0 = data.rows;
      this.pageData3.total = data.total;
    },
     
    async drawChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("pieBox"));
      // 指定图表的配置项和数据
      let option = {
       title: {
        text: '用户评价统计图',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ["好评","一般","差评"]
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '44%',
            center: ['50%', '35%'],
            data: [
                {value: this.pageData1.total, name: '好评'},
                {value: this.pageData2.total, name: '一般'},
                {value: this.pageData3.total, name: '差评'},
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  },
  computed:{
    getEvaluateList0(){
      return this.evaluateList0
    },
  },
  watch:{
    getEvaluateList0(){
      this.drawChart();
    },
    
  },
  mounted() {

    this.drawChart();
  }
  
};

</script>

<style lang="less">
.customerEvaluate {
  display: flex;
  border-bottom: 1px dashed grey;
  padding: 10px 0;
  margin-bottom: 10px;
  .customerHeadIcon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .customerInfo {
    width: 80%;
    margin-left: 20px;
    text-align: left;
    .customerName,
    .orderNum {
      color: grey;
      height: 30px;
      line-height: 30px;
    }
    .evaluateContent {
      line-height: 1.5;
    }
  }
}
#pieBox{
  width: 700px;
  height:500px;
  margin: 0 auto;
}
.evaluateTab .el-tabs__item{
  line-height: 25px;
}
.el-tabs__content{
  height: 370px;
}
</style>>

